<template>
    <view class="page">
        <view class="content">
            <view class="box" v-for="(item,index) in list">
                <view class="line">
                    <text class="line-text">第{{item.i}}次支出</text><text class="line-text">{{item.pay_time}}</text>
                </view>
                <view class="line">
                    <!--<text class="line-text">有效期：2021-09-11至2021-09-11</text>-->
                    <text class="line-text">有效期：</text>
                </view>
                <view class="line">
                    <text class="line-text">付款金额:{{item.price}}</text><text class="line-text">总计:0</text>
                </view>
                <template v-if="parseInt(item.pay_status) === 1">
                    <u-line></u-line>
                    <view class="line">
                        <!--<text class="line-text">实收:0 2021-09-11 管理员</text>-->
                        <text class="line-text">实收: 管理员</text>
                        <u-tag text="确认已付" plain size="mini" type="warning"></u-tag>
                    </view>
                </template>
            </view>

            <u-empty v-if="list.length < 1" mode="data" text="账单数据为空" textSize="18" iconSize="100" marginTop="200rpx"></u-empty>
        </view>
    </view>
</template>

<script>
    export default {
        name: "bill",
        data(){
            return{
                list:[],
            }
        },
        onLoad(option){
            uni.showLoading({title: '正在加载'});
            uni.$u.http.get('/api.php/House/owner_bill', {params: {owner_id:option.owner_id}}).then(res => {
                uni.hideLoading();
                this.list = res;
            });
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        background-color: RGBA(245, 245, 245, 1);
    }
    .content{
        padding: 20rpx;
    }

    .box{
        background-color: #ffffff;
        padding: 10rpx;
        margin: 15rpx 0;
    }

    .box:first-child{
        margin-top: 0;
    }

    .line{
        @include flex();
        justify-content: space-between;
        margin: 20rpx;
    }
    .line-text{
        font-size: 14px;
        color: #909193;
    }
</style>